<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box {
				width: 700px;
				height: 500px;
				border: 1px solid red;
				margin: 0 auto;
				padding: 100px 100px 0px;
			}

			p {
				color: #5e5e5e;
			}

			p input {
				margin-left: 10px;
				width: 170px;
				height: 25px;
				border: 2px solid #ccc;
			}
			p button {
				width: 150px;
				height: 40px;
				margin-top: 20px;
				border: none;
				background-color: #ff6600;
				color: #fff;
			}
			p span {
				margin-left: 15px;
			}
			p img {
				width: 30px;
				height: 30px;
				position: relative;
				left: 10px;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>用户名<input type="text" id="user" /><span></span></p>
			<p>登录密码:<input type="password" id="pwd" /><span></span></p>
			<p><button onclick="btn()">同意协议并注册</button></p>
		</div>
		<script>
			var user = document.getElementById("user");
			var pwd = document.getElementById("pwd");
			var spn = document.getElementsByTagName("span");
			var a = /^[\u4e00-\u9fa5_a-zA-Z0-9]{6,12}$/;
			var b = /^\w{6,12}$/;
			var c = /^[0-9]{6,12}$/;
			var d = /^[a-zA-z]{6,12}$/;
			var aa = 0,
				bb = 0,
				cc = 0;
			user.onfocus = function () {
				spn[0].innerHTML = "6-12 个字符，推荐使用中文名";
			};
			user.onblur = function () {
				if (user.value == "") {
					spn[0].innerHTML = "不能为空";
					aa = 0;
				} else if (a.test(user.value) == false) {
					spn[0].innerHTML = "长度不在范围内或者存在非法字符";
					aa = 0;
				} else {
					spn[0].innerHTML = "正确";
					aa = 1;
				}
			};
			pwd.onfocus = function () {
				spn[1].innerHTML = "长度在 6-12 个字符";
			};
			pwd.onblur = function () {
				if (pwd.value == "") {
					spn[1].innerHTML = "不能为空";
					bb = 0;
				} else if (b.test(pwd.value) == false) {
					spn[1].innerHTML = "长度不在范围内或者存在非法字符";
					bb = 0;
				} else if (c.test(pwd.value) == true) {
					spn[1].innerHTML = "不能全是数字";
					bb = 0;
				} else if (d.test(pwd.value) == true) {
					spn[1].innerHTML = "不能全是字母";
					bb = 0;
				} else {
					spn[1].innerHTML = "正确";
					bb = 1;
				}
			};
			function btn() {
				if (aa + bb == 2) {
					alert("提交成功");
				} else {
					alert("提交失败");
				}
			}
		</script>
	</body>
</html>
